<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <header>
                <script type="text/javascript">
                    window.onload = function(){
                        // get the canvas DOM element by its ID
                        var canvas = document.getElementById("logoCanvas");
                        // declare a 2D context using the getContext() method of the canvas object
                        var context = canvas.getContext("2d");
				
                        // context.translate(canvas.width/2, canvas.height/2);
                        // set the line width to 10 pixels
                        context.lineWidth = 3.5;
                        // set the line color
                        context.strokeStyle = "#2F2F2F";
				
                        // Topo
                        context.moveTo(220, 172); // 1
                        context.lineTo(198, 175); // 2
                        context.lineTo(176, 180); // 3
                        context.lineTo(118, 112); // 4

                        // Lado esquerdo
                        context.lineTo(160, 200); // 5
                        context.lineTo(139, 227); // 6
                        context.lineTo(192, 247); // 7
                        context.lineTo(219, 323); // 8

                        // 
                        context.lineTo(200, 207); // 9
                        context.lineTo(220, 207); // 10
                        context.lineTo(200, 207); // 11
                        context.lineTo(176, 180); // 12

                        context.lineTo(160, 200); // 13
                        context.lineTo(168, 218); // 14
                        context.lineTo(139, 227); // 15
                        context.lineTo(168, 218); // 16

                        context.lineTo(192, 247); // 17
                        context.lineTo(200, 207); // 18
                        context.lineTo(168, 218); // 19
                        context.lineTo(205, 240); // 20

                        context.lineTo(192, 247); // 21
                        context.lineTo(176, 180); // 22
                        context.lineTo(192, 247); // 23
                        context.lineTo(220, 248); // 24
				
                        context.stroke();
				
				
                        context.scale(-1, 1);
                        context.translate(-439, 0);
			    
                        context.moveTo(220, 172); // 1
                        context.lineTo(198, 175); // 2
                        context.lineTo(176, 180); // 3
                        context.lineTo(118, 112); // 4

                        // Lado esquerdo
                        context.lineTo(160, 200); // 5
                        context.lineTo(139, 227); // 6
                        context.lineTo(192, 247); // 7
                        context.lineTo(219, 323); // 8

                        // 
                        context.lineTo(200, 207); // 9
                        context.lineTo(220, 207); // 10
                        context.lineTo(200, 207); // 11
                        context.lineTo(176, 180); // 12

                        context.lineTo(160, 200); // 13
                        context.lineTo(168, 218); // 14
                        context.lineTo(139, 227); // 15
                        context.lineTo(168, 218); // 16

                        context.lineTo(192, 247); // 17
                        context.lineTo(200, 207); // 18
                        context.lineTo(168, 218); // 19
                        context.lineTo(205, 240); // 20

                        context.lineTo(192, 247); // 21
                        context.lineTo(176, 180); // 22
                        context.lineTo(192, 247); // 23
                        context.lineTo(220, 248); // 24
				
                        context.stroke();


                        var canvasText = document.getElementById("fox");
                        var contextText = canvasText.getContext("2d");
                        contextText.font = "46pt Arial";
                        contextText.textAlign = "center";
                        contextText.textBaseline = "middle";
                        contextText.fillStyle = "#667B8E";
                        contextText.fillText("fox", 55, 27);

                        var canvasText = document.getElementById("inline");
                        var contextText = canvasText.getContext("2d");
                        contextText.font = "46pt Arial";
                        contextText.textAlign = "center";
                        contextText.textBaseline = "middle";
                        contextText.fillStyle = "#F5D765";
                        contextText.fillText("inline", 75, 27);

                        var canvasText = document.getElementById("tech");
                        var contextText = canvasText.getContext("2d");
                        contextText.font = "14pt Arial";
                        contextText.textAlign = "center";
                        contextText.textBaseline = "middle";
                        contextText.fillStyle = "#8C8C8C";
                        contextText.fillText("technologies", 75, 27);
                    };
                </script>

                <h2>Rotary - Erro 500</h2>
            </header>
            <style type="text/css">
                #logoCanvas {
                    border: 0px solid blue;
                    margin-left: -9px;
                    margin-top: -9px;
                    /*background-color: red;*/
                }
                #fox {
                    border: 0px solid red;
                    margin-left: -38%;
/*                    margin-top: -10.1%;*/
                }
                #inline {
                    border: 0px solid green;
                    margin-left: -0.7%;
                    margin-top: -10.1%;
                }
                #tech {
                    border: 0px solid green;
                    margin-left: -15%;
                    margin-bottom: -3%;
                }
            </style>
            <canvas id="logoCanvas" width="440" height="380" > </canvas>
            <canvas id="fox" width="96" height="50" > </canvas>
            <canvas id="inline" width="150" height="50" > </canvas>
            <canvas id="tech" width="150" height="50" > </canvas>

            <h1 style="float: right; margin-top: 20%; margin-right: 5%; font-size: 32px; font-weight: bold; color: black">
                Ocorreu um erro inesperado ! 
            </h1>
            <br/>
            <p style="float: right; margin-top: -9%; margin-right: 5%; font-size: 24px">
                Por favor, contacte o administrador do sistema !
            </p>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </ui:define>
    </ui:composition>
</html>
